import React, { useEffect, useMemo, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { Button, Cell, NavBar, Tabs } from "react-vant";
import { Arrow } from "@react-vant/icons";
import axios from "axios";

const List = () => {
  // 获取查询参数
  const [searchParams] = useSearchParams();
  const start = searchParams.get("start");
  const end = searchParams.get("end");
  const date = searchParams.get("date");
  const [list, setList] = useState([]);
  const navigate = useNavigate()
  const currentDate = new Date();
  const dateList = new Array(21).fill().map((v, i) => {
    return new Date(
      currentDate.getTime() + 24 * 60 * 60 * 1000 * i
    ).toLocaleDateString();
  });

  const getList = async () => {
    const resp = await axios.get("/api/trip/airplane", {
      params: { start, end },
    });
    setList(resp.data.data.body.fl);
  };
  
  const toDetail = v => {
    navigate(`/detail/${v.atp}`, { state: v })
  }

  useEffect(() => {
    getList();
  }, []);

  return (
    <div>
      <NavBar
        title={
          <div>
            <span>{start}</span>
            <Arrow />
            <span>{end}</span>
          </div>
        }
      ></NavBar>

      <Tabs>
        {dateList.map((v, i) => {
          return <Tabs.TabPane title={v} key={i}></Tabs.TabPane>;
        })}
      </Tabs>

      <Cell.Group>
        {
          list.map((v, i) => {
            return <Cell key={i} 
              title={<div>{v.dasn}{v.dat} 到 {v.aasn}{v.aat} {v.dst}-{v.ast}</div>}
              label={<div>{v.asn}|{v.amn}|{v.amt}</div>}
              value={<div>
                <div style={{color: 'red'}}>¥:{v.atp}</div>
                <div>
                  <Button size="small" type="primary" onClick={() => toDetail(v)}>预定</Button>
                </div>
              </div>}
            ></Cell>
          })
        }
      </Cell.Group>
    </div>
  );
};

export default List;
